Sencha Touch ExtJS 목록에 체크 박스 추가

Sencha Touch 1.0에서 개발 중. Ext.List를 사용하여 목록을 렌더링하고 있지만 각 목록 항목의 시작 부분을 확인란으로 시작하고 싶습니다. 또한 배열 항목 값, config 옵션에 주어진 배열을 기반으로 상태를 변경하려고합니다. Ext.form.Checkbox를 Ext.List에 추가하는 방법이 있습니까?Sencha Touch ExtJS 목록에 체크 박스 추가

내가 대신 <input type="checkbox".../>에 <itemTpl> 설정 옵션을 사용하는 경우, 그것은 화면에 추한 외모와 둘째 나는 확인란 여기

에 이벤트를 수신하는 방법을 모른다 통해 UR 눈 사탕 코드입니다 :

Ext.regModel('Todos', { 
    fields: ['title', 'completed_at'] 
}); 

var groupingBase = { 
    itemTpl: '<div class="contact2"><strong>{title}</strong></div>', 
    selModel: { 
     mode: 'SINGLE', 
     allowDeselect: true 
    }, 
    // grouped: true, 
    indexBar: true, 

    onItemDisclosure: { 
     scope: 'test', 
     handler: function (record, btn, index) { 
      alert('Disclose more info for ' + record.get('title')); 
     } 
    }, 

    store: new Ext.data.Store({ 
     model: 'Todos', 
     sorters: 'title', 

     getGroupString: function (record) { 
      return record.get('title')[0]; 
     }, 

     data: [todos] //todos array is prev populated with required items' properties 
    }) 
}; 

myList = new Ext.List(Ext.apply(groupingBase, { 
    fullscreen: true 
})); 
//List ends 

tasksFormBase = { 
    title: 'Tasks', 
    iconCls: 'favorites', 
    cls: 'card2', 
    badgeText: '4', 
    layout: 'fit', 
    items: [ 
    myList, { 
     xtype: 'checkboxfield', 
     name: 'cool', 
     label: 'Cool' 
    }], 
    dockedItems: [todosNavigationBar] 
};

는 tasksFormBase는 다음 Ext.TabPanel의 설정 옵션

도움이 폼 내선 마스터에 추가됩니다 // ???

출처

2010-11-24 Shah Ismail

는 내가처럼 보이는 나는 TPL과 List 컨트롤의 itemTpl 속성을 사용하는 템플릿 를 사용할 필요가 알아 냈 :

<textarea id="todos-template" class="x-hidden-display"> 
      <div id="todo_item_{todo_id}" class="todo_list"> 
       <input type="checkbox" id="todo_check_{todo_id}" class="todo_checkbox unchecked"/>   <strong>{title}</strong> 
      </div> 
</textarea>

다음과 같은 리스너 추가 :

itemtap: function(dataview, index, item, event) { 
var todo = dataview.getStore().getAt(index).data; 
if (eve.getTarget('input#todo_check_'+todo.todo_id)) { 
        Ext.get(item).addCls('selected'); 
        ele = Ext.get('todo_check_'+todo.todo_id); 

        //reverse condition as the event is fired before the state is set 
        if(!ele.getAttribute('checked')) { 
         todo.completed_at = Api.formatDate(new Date()); 
         ele.replaceCls('unchecked', 'checked'); 
        } else { 
         ele.replaceCls('checked', 'unchecked'); 
         todo.completed_at = null; 
        } 
}

을 그래서 목록 항목을 가볍게 두 드리면서 체크 박스가 두드려져 있는지 확인하고 이에 따라 적절한 div CSS 클래스를 변경합니다. 나는 라디오에서도 똑같이 일할 수 있기를 바랍니다.

출처

2011-01-31 18:49:49

안녕 친구 당신은 내가 엽차 터치 2.0.It에서 같은 문제에 붙어로 엽차 터치 2.0 나에게 UR 전체 코드를 제공 할 수 있습니다 당신이 그렇게한다면 매우 도움이 될 것이고, 나는 그것을 높이 평가할 것입니다 .Thanx는 사전에. – himanshu

GitHub에서 공유하면 Touch 2.1.3을 사용하여 DataView에서 동일한 결과를 얻으려고하면 좋을 것입니다. –

Sencha Touch의 경우 아이콘은 Pictos 글꼴로 저장됩니다. 여기에 문자가 있습니다 map 예를 들어이 확인란을 만든 단추입니다 (참고 : 콜백 함수가 링크에 없습니다). 체크 표시 여부를 나타내는 글꼴 색만 변경하면됩니다. CSS에서

HTML에서

a { 
text-decoration: none; 
} 
.icon { 
font-family: "Pictos"; 
}

<span> 
    Item #1 
    <a href="#"> 
    <span class="icon">3</span> 
    </a> 
</span>

출처

2014-03-10 19:21:35 calmcajun

Sencha Touch ExtJS 목록에 체크 박스 추가

답변

관련 문제